<template>
    <div class="conDetail">
    	<Header :show="true">会议详情</Header>
    	<div class="content">
    		<div class="main">
    			<p class="tit">{{arrList.title}}</p>
				<div class="time">
					<i class="fa fa-clock-o"></i>
					<span>时间:</span>
					<span>{{ arrList.timeBegin | normalTime }}</span>
					<span>到</span>
					<span>{{ arrList.timeEnd | normalTime }}</span>
				</div>
				<div class="site">
					<i class="fa fa-map-marker"></i>
					<span>地点:</span>
					<span>{{ arrList.detailSite }}</span>
				</div>
				<div class="state">
					<div class="left">
						<i class="fa fa-caret-square-o-left"></i>
						<span>参会状态:</span>
					</div>
					<div class="right">
						<span>待审核 - </span>
						<span>已审核 - </span>
						<!-- <span>支付 - </span> -->
						<span>报到 - </span>
						<span>结束</span>
					</div>
				</div>
				<div class="host" id="host" v-show="!downIcon">
					<i class="fa fa-building"></i>
					<span>主办方:</span>
					<span>{{ arrList.organization }}</span>
				</div>
				<div class="packup">
					<span @click="reverse">
						<i class="fa fa-angle-double-up" v-show="!downIcon"></i>
						<i class="fa fa-angle-double-down" v-show="downIcon"></i>
					</span>
				</div>
    		</div>
    		<div class="apply">
    			<router-link to="/Applicant">
	    			<span>已报名</span>
	    			<div>
	    				<img src="../assets/img1.jpg">
	    				<img src="../assets/img2.jpg">
	    				<img src="../assets/img3.jpg">
	    				<img src="../assets/img4.jpg">
	    				<img src="../assets/img5.jpg">
	    			</div>
	    			<i class="fa fa-angle-right"></i>
    			</router-link>
    		</div>
    		<div class="mainTag">
    			<div class="row">
					<router-link :to="{path:'/Invite/'+arrList.id}">
    					<span><img src="../assets/img01.png"></span>
    					<span>邀请函</span>
					</router-link>
    				<router-link :to="{path:'/Journey/'+arrList.id}">
    					<span><img src="../assets/img02.png"></span>
    					<span>日程</span>
    				</router-link>
    				<router-link to="/Environment">
    					<span><img src="../assets/img03.png"></span>
    					<span>城市环境</span>
    				</router-link>
    				<router-link :to="{path:'/Guest/'+arrList.id}">
    					<span><img src="../assets/img04.png"></span>
    					<span>嘉宾</span>
    				</router-link>
    				<router-link to="/Pay">
    					<span><img src="../assets/img05.png"></span>
    					<span>缴费及发票</span>
    				</router-link>
    				<router-link :to="{path:'/Organization/'+arrList.id}" v-show="!text">
    					<span><img src="../assets/img06.png"></span>
    					<span>组织机构</span>
    				</router-link>
    				<router-link :to="{path:'/Counsel/'+arrList.id}" v-show="!text">
    					<span><img src="../assets/img07.png"></span>
    					<span>参会咨询</span>
    				</router-link>
    				<router-link :to="{path:'/Traffic/'+arrList.id}" v-show="!text">
    					<span><img src="../assets/img08.png"></span>
    					<span>市内交通</span>
    				</router-link>
    				<a @click="changeText">
    					<span><img src="../assets/img09.png"></span>
    					<span v-show="text">更多</span>
    					<span v-show="!text">收起</span>
    				</a>
    			</div>
    		</div>
    		<div class="otherTags">
				<router-link to="/Message">	
					<span class="icon1">
						<i class="fa fa-bullhorn"></i>
						<span>活动通知</span>
					</span>
					<span class="icon2"><i class="fa fa-angle-right"></i></span>
				</router-link>	
				<router-link to="/Conference">
					<span class="icon1">
						<i class="fa fa-commenting blue"></i>
						<span>会议交流</span>
					</span>
					<span class="icon2"><i class="fa fa-angle-right"></i></span>
				</router-link>
				<router-link :to="{path:'/ApplyInfo/'+arrList.id}">
					<span class="icon1">
						<i class="fa fa-book green"></i>
						<span>报名信息</span>
					</span>
					<span class="icon2"><i class="fa fa-angle-right"></i></span>
				</router-link>
				<router-link to="/Conference">	
					<span class="icon1">
						<i class="fa fa-navicon"></i>
						<span>更多活动</span>
					</span>
					<span class="icon2"><i class="fa fa-angle-right"></i></span>
				</router-link>	
    		</div>
    	</div>
    </div>
</template>

<script>
	import Header from './base/Header'

	export default {
        data(){
        	return {
        		arrList:{},
        		flag: true,
        		downIcon:true,
        		text:true
        	}	
        },
        components:{
        	Header
        },
        mounted(){
         	// var reg = /\/conDetail\/(\d+)/;
          	// var id = this.$route.path.match(reg)[1];
            var id = this.$route.params.id;//同上面两行
            this.fetchData(id);
        },
        methods:{
       	    fetchData(id){
       	 	    var _this = this;
	            this.$http.get('static/data/conDetail.data')
	               .then(function(res){
	               	_this.arrList = res.data[id];
	               	return _this.arrList.id;
	               }).catch(function(err){
	               	console.log(err);
	               })
            },
            reverse() {
            	this.downIcon = !this.downIcon;
            },
            changeText() {
            	this.text = !this.text;
            }     
       	}
	}
</script>

<style scoped lang="less">
	.conDetail{
		padding-top: 30px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	.content{
		padding: 10px 0;
		color: #333;
		background: #f4f4f4;
		/*margin-bottom: 60px;*/
		/* 基本信息 */
		.main{
			background: #fff;
			padding: 8px 18px;
			margin: 10px 0;
			border-radius: 5px;
			color: #aaa;
			.tit{
				font-size: 0.32rem;
				color: #333;
				padding: 8px 0;
				font-weight: bold;
			}
			a{
				color: #333;
			}
			.time{
				font-size: 0.26rem;
				margin: 10px 0;
			}
			.site{
				font-size: 0.26rem;
				margin: 10px 0;
			}
			.state{
				font-size: 0.27rem;
				overflow: hidden;
				.left{float:left;padding-right: 5px;display: inline-block;}
				.right{float: left;width: ;display: inline-block;vertical-align: top;}
			}
			i{
				color: #ff6100;
				font-size: 0.36rem;
				padding: 0 5px;
			}
			.fa-map-marker{
				padding-left: 7.5px;
			}
			.host{
				font-size: 0.26rem;
				margin: 10px 0;
			}
			.packup{
				text-align: center;
				padding: 0;
				margin: 0;
				height: 0.6rem;
				position: relative;
				span{
					position: absolute;
					top: -25px;
				}
				i{font-size: 0.56rem;}
			}
		}
		/* 已报名 */
		.apply{
			background: #fff;
			margin: 10px 0;
			a{
				color: #555;
				span{
					font-size: 0.3rem;
					margin-left: 0.5rem;
					height: 0.7rem;
					line-height: 0.7rem;
					position: relative;
					top: -10px;
				}
				div{display: inline-block;overflow: hidden;}
				img{width: 0.7rem;height: 0.7rem;float: left;margin-right: 3px;border-radius: 3px;}
				i{font-size: 0.56rem;position: relative;top: -6px;}
			}
		}
		/* 九宫格 */
		.mainTag{
			background: #fff;
			margin: 10px 0;
			.row{
				display: felx;
				margin: 10px 0;
				overflow: hidden;
				a{ 
					float: left;
					width: 33%;
					list-style: none;
					display: inline-flex;
					flex-direction: column;
					/*flex: 1;*/
					justify-content: center;
					align-items: center;
					border-right: 1px solid #e2e2e2;
					border-bottom: 1px solid #e2e2e2;
					span:first-child{
						background: #ff6100;
						display: inline-block;
						width: 1rem;
						height: 1rem;
						border-radius: 50%;
						text-align: center;
						margin: 10px 0 3px;
						img{width: 0.6rem;height: 0.6rem;margin-bottom: 14px;}
					}
					span:nth-child(2){
						font-size: 0.25rem;
						padding-bottom: 10px;
						color: #777;
					}
					span:last-child{
						font-size: 0.25rem;
						padding-bottom: 10px;
						color: #777;
					}
				}
			}
		}
		/*其他底部按钮*/
		.otherTags{
			background: #fff;
			a{ 
				display: block;
				border-bottom: 1px solid #e2e2e2;
				padding: 15px 30px;
				font-size: 0.3rem;
				i{font-size: 0.40rem;}
				.icon1{
					i{color: #ff6100;margin-right: 5px;}
					.blue{color: #87a0e8;}
					.green{color: #60a371;}
					span{
						color: #333;
					}
				}
				.icon2{
					i{float: right;font-size: 0.56rem;color: #999;}
				}
			}	
		}
	}
</style>